<template>
  <view class="custom-navbar" :style="{'background-color':bgColor, 'color':color}">
    <!-- 自定义导航栏的内容 -->
	<view class="back-button">
	  <uni-icons type="left" size="30" @click="navigateBack" :color="color"></uni-icons>
	</view>
	
    <view class="title">{{ title }}</view>
    <slot></slot>
  </view>
  <!-- 页面其余内容 -->
</template>
 
<script>
export default {
  onLoad() {
    uni.hideNavigationBar(); // 隐藏默认导航栏
  },
  props: {
		bgColor: {
			type: String,
			default: '#007AFF'
		},
		title: {
			type: String,
			default: ''
		},
		color: {
			type: String,
			default: 'rgb(51, 51, 51)'
		}
  },
  methods: {
    navigateBack() {
      uni.navigateBack(); // 返回上一页面
    }
  }
}
</script>
 
<style scoped>
.custom-navbar {
  /* 自定义导航栏样式 */
  display: flex;
  align-items: center;
  color: #FFFFFF;
  padding-top: var(--status-bar-height);
}
.title {
  flex: 1;
  text-align: center;
}
.back-button {
  padding: 20rpx;
}
</style>